<template>
    <nav>
        <div id="sidebar">
           <div class="panel">
               <div class="header">
                    热文榜
                </div>
               <div class="inner">
                   <ul class="top-list">
                       <li v-for="(item, index) in topics" :key="index"><router-link class="title ellipsis" :to="'/topic/' + item._id">{{item.title}}</router-link></li>
                   </ul>
               </div>
           </div>
        </div>
    </nav>
</template>
<script>
    import {mapState, mapActions} from 'vuex'
    import { getTopicTop } from "@/service/api"

    export default {
        data() {
            return {
                topics: [],
            }
        },
        mounted(){
            this.getTopicTopFuc();
        },
        computed: {

        },
        methods: {
            async getTopicTopFuc() {
                let res = await getTopicTop()
                // console.log(res)
                if(res.code) {
                    this.topics = res.result
                    // console.log(res)
                }
            }
        },
    }
</script>

<style lang="scss" scoped >
    @import '../../style/mixin';
    
    #sidebar {
        .header {
            color: $main;
        }
        width: 290px;
        font-size: 14px;
        float: right;
        margin-bottom: 20px;
        a {
            color: $fontC2;
            &:hover {
                color: $main;
            }
        }
        .top-list {
            li {
                line-height: 26px;
                .title {
                    display: block;
                    width: 100%;
                    font-size: 13px;
                }
            }
        }
        .user_card {
            .user_avatar {
                visibility: middle;
                margin-right: 0.5rem;
                img {
                    border-radius: 3px;
                    height: 48px;
                    width: 48px;
                }
            }
            .user_name {
                font-size: 16px;
                max-width: 120px;
                white-space: nowrap;
                display: inline-block;
                vertical-align: middle;
            }
        }
        .create_topic {
            background-color: $main;
            color: $fff;
            text-align: center;
            width: 80px;
            display: block;
            @include lh(30px);
            border-radius: 3px;
            &:hover {
                color: $fff;
            }
        }
    }
</style>

